<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        div:nth-of-type(1){
            width:30ch;
            height:30ch;
            border:solid 20px rgba(0,0,0,.5);
            background:url(img/5.jpg) no-repeat;
            padding:50px;
            background-origin:border-box;
            float:left;
        }
        div:nth-of-type(2){
            width:30ch;
            height:30ch;
            border:solid 20px rgba(0,0,0,.5);
            background:url(img/5.jpg) no-repeat;
            padding:50px;
            background-origin:padding-box;
            float:left;
        }
        div:nth-of-type(3){
            width:30ch;
            height:30ch;
            border:solid 20px rgba(0,0,0,.5);
            background:url(img/5.jpg) no-repeat;
            padding:50px;
            background-origin:content-box;
            float:left;
        }
        div:nth-of-type(4){
            width:30ch;
            height:30ch;
            border:solid 20px rgba(0,0,0,.5);
            background:url(img/5.jpg) no-repeat;
            padding:50px;
            background-origin:border-box;
            float:left;
            background-clip: border-box;
            margin:10px 10px;
        }
        div:nth-of-type(5){
            width:30ch;
            height:30ch;
            border:solid 20px rgba(0,0,0,.5);
            background:url(img/5.jpg) no-repeat;
            padding:50px;
            background-origin:border-box;
            background-clip: padding-box;
            float:left;
            margin:10px 10px;
        }
        div:nth-of-type(6){
            width:30ch;
            height:30ch;
            border:solid 20px rgba(0,0,0,.5);
            background:url(img/5.jpg) no-repeat;
            padding:50px;
            background-origin:border-box;
            background-clip:content-box;
            float:left;
            margin:10px 10px;
        }
        div:nth-of-type(7){
            width:50vw;
            height:50vh;
            border:solid 10px red;
            float:left;
            /*background:url(img/3.jpg) no-repeat,url(img/4.jpg) no-repeat right top;*/
            background-size:30px 30px,10px 10px;
            /*background-size:10% 10%,15% 15%;*/
            background:green url(img/3.jpg) no-repeat;
            /*background-size:contain;*/
            /*background-size:cover;*/
        }
    </style>
</head>
<body>
    <div></div>
    <div></div>
    <div></div>

    <div></div>
    <div></div>
    <div></div>

    <div></div>
</body>
</html>
